<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>订单信息</title>
	<!-- <link rel="stylesheet"
	href="<c:url value="/statics/bootstrap-3.3.0/css/bootstrap.css"/>">
<link rel="stylesheet"
	href="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.css"/>">
<link rel="stylesheet"
	href="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.theme.css"/>">
<link rel="stylesheet" href="<c:url value="/statics/css/style.css"/>">
<script src="<c:url value="/statics/jquery-1.12.4/jquery-1.12.4.js"/>"></script> -->

	<link rel="stylesheet" href="../statics/bootstrap-3.3.0/css/bootstrap.css">
	<link rel="stylesheet" href="../statics/jquery-ui-1.12.1/jquery-ui.css">
	<link rel="stylesheet" href="../statics/jquery-ui-1.12.1/jquery-ui.theme.css">
	<link rel="stylesheet" href="../statics/css/style.css">
	<script src="../statics/jquery-1.12.4/jquery-1.12.4.js"></script>
</head>
<!-- <jsp:include page="../home/header.jsp" /> -->
<!-- 改为jQuery引入 -->

<body>
	<div id="header"></div>
	<div class="container" style="position: relative; transform: translate(0, 0)">
		<div class="col-md-9" style="float: left">
			<div class="col-md-12 r1" style="background-color: #e4e4e4; height: 40px">
				<div class="col-md-6" style="margin-top: 5px">
					<B style="color: #c4c4c4; font-size: 20px">订单</B>
				</div>
			</div>

			<div class="col-md-12 r2"
				style="background-color: #f9f9f9; padding-top: 5px; padding-bottom: 30px; padding-left: 120px; padding-right: 120px; margin-bottom: 20px">
				<div class="col-md-12" align="center" style="margin-bottom: 5px">
					<h3>订单信息明细</h3>
				</div>
				<div class="col-md-12" style="background-color: #ffffff">
					<div class="col-md-12" style="margin-bottom: 10px; margin-top: 20px;">
						<div class="col-md-12" style="padding: 30px; background-color: #f2f2f2">
							<div class="col-md-5" style="padding-left: 60px; padding-top: 20px">
								<!-- <p style="color: #666666; height: 30px">
								<B>${orderInfo.id}</B>
							</p>
							<p style="color: #666666; height: 30px">
								<B>${orderInfo.goodName}</B>
							</p>
							<p style="color: #666666; height: 30px">
								<B>${orderInfo.seller}</B>
							</p>
							<p style="color: #666666; height: 30px">
								<B>${orderInfo.customer}</B>
							</p>
							<p style="color: #666666; height: 30px">
								<B>${orderInfo.statusId == 2 ? "交易中":"交易完成"}</B>
							</p>
							<p style="color: #666666; height: 30px">
								<B>${orderInfo.submitDate}</B>
							</p>
							<p style="color: #666666; height: 30px">
								<B>${orderInfo.endDate}</B>
							</p> -->
								<p style="color: #666666; height: 30px">
									<B>订单号</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>物品名称</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>金额</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>卖家</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>买家</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>订单状态</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>交易时间</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>结束时间</B>
								</p>
								<p style="color: #666666; height: 30px">
									<B>联系卖家</B>
								</p>
							</div>

							<div id="order" class="col-md-7" style="padding-left: 0px; padding-top: 20px">
								<p style="color: #666666; height: 30px">
									<B id="order_id"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_goodName"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="money"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_seller"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_customer"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_status"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_sub"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="order_end"></B>
								</p>
								<p style="color: #666666; height: 30px">
									<B id="phone"></B>
								</p>
							</div>
						</div>

						<div id="order_btn" class="col-md-12" style="margin-top: 20px">
							
<!--							<button class="btn btn-success" onclick="deleteOrder()">删除</button>-->
							
							<!-- <button id="success" class="btn btn-primary pull-right"
							style="display: ${orderInfo.statusId == 2 ? "
							":"none"}" onclick="selectValue()">完成交易</button>
						<button id="noSuccess" class="btn btn-primary pull-right"
							style="display: ${orderInfo.statusId == 3 ? "
							":"none"}" disabled="true">交易已完成</button> -->
							
							
<!--							<button id="success" class="btn btn-primary pull-right"-->
<!--								style="display: orderInfo.statusId == 2 ? &quot;&quot;:&quot;none&quot;"-->
<!--								onclick="selectValue()">完成交易</button>-->
<!--							<button id="noSuccess" class="btn btn-primary pull-right"-->
<!--								style="display: orderInfo.statusId == 3 ? &quot;:&quot;none&quot;"-->
<!--								disabled="true">交易已完成</button>-->
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="re-bar" class="col-md-3 r" style="background-color: #f9f9f9; padding-bottom: 15px;">
			<div class="col-md-12 r"
				style="text-align: center; margin-top: 10px; background-color: #e4e4e4; padding: 5px">
				<B style="font-size: 20px; color: #a2a2a2">其他订单</B>
			</div>

			<div class="col-md-12 r"  id="orderBox"
				style="background-color: #ffffff; margin-top: 15px; overflow-y: auto; height: 500px; padding: 5px">
				<!-- <c:choose>
				<c:when test="${orders.size() == 0}">
					<div class="col-md-12" align="center"
						style="background-color: #ffffff; margin-top: 50px;">
						<img src="<c:url value="/statics/image/logo/yihan.png"/>"
							width="95%" ; height="170px;">
						<p style="color: #c4c4c4; font-size: 16px">抱歉，暂无其他订单！</p>
					</div>
				</c:when>
				
				<c:otherwise>
					<c:forEach var="order" items="${orders}">
						<a href="/wzh-secondshop/user/orderInfo?orderId=${order.id}">
							<div class="col-md-12 rev"
								style="padding: 10px; margin-bottom: 5px;">
								<p>${order.submitDate}</p>
								<p>${order.goodName}</p>
							</div>
						</a>
					</c:forEach>
				</c:otherwise>
			</c:choose> -->
				<!-- 以上为类似switch语法保留一个订单和无订单状态，二选一 -->
<!--				<img src="../statics/image/logo/yihan.png" width="95%" ; height="170px;">-->
<!--				<p style="color: #c4c4c4; font-size: 16px">抱歉，暂无其他订单！</p>-->
<!--				&lt;!&ndash; 此连接由服务器指定不做修改 &ndash;&gt;-->
<!--				<a href="/wzh-secondshop/user/orderInfo?orderId=${order.id}">-->
<!--					<div class="col-md-12 rev" style="padding: 10px; margin-bottom: 5px;">-->
<!--						<p>order.submitDate</p>-->
<!--						<p>order.goodName</p>-->
<!--					</div>-->
<!--				</a>-->

			</div>
		</div>
	</div>
	<div id="footer"></div>
	<script>
		$("#header").load("../home/header.html");
	</script>
	<script>
		$("#footer").load("../home/footer.html");
	</script>
	<script>
		$(function () {
			$(window).scroll(function () {
				if ($(document).scrollTop() >= 20) {
					$("#re-bar").css({
						"position": "fixed",
						"top": 50 + $(document).scrollTop() + "px",
						"width": 285,
						"right": 15
					});
				} else {
					$("#re-bar").css({
						"position": "fixed",
						"top": 70 + "px",
						"width": 285,
						"right": 15
					});
				}
			})
		});

		function selectValue() {
			//  $.getJSON("/wzh-secondshop/user/order/update/status/" + ${orderInfo.id} + "&3", function (data) {
			$.getJSON("/wzh-secondshop/user/order/update/status/" + orderInfo.id + "&3", function (data) {
				if (data == false) {
					alert("操作失败！");
				} else {
					document.getElementById("success").style.display = "none";
					document.getElementById("noSuccess").style.display = "";
					document.getElementById("order").innerHTML = "<p style=\"color: #666666; height: 30px\"><B>" + data.id + "</B></p>" +
						"<p style=\"color: #666666; height: 30px\"><B>" + data.goodName + "</B></p>" +
						"<p style=\"color: #666666; height: 30px\"><B>" + data.seller + "</B></p>" +
						"<p style=\"color: #666666; height: 30px\"><B>" + data.customer + "</B></p>" +
						//  "<p style=\"color: #666666; height: 30px\"><B>${data.statusId == 2 ? '交易中':'交易完成' }</B></p>" +
						"<p style=\"color: #666666; height: 30px\"><B>data.statusId == 2 ? '交易中':'交易完成' </B></p>" +
						"<p style=\"color: #666666; height: 30px\"><B>" + data.submitDate + "</B></p>" +
						"<p style=\"color: #666666; height: 30px\"><B>" + data.endDate + "</B></p>";
				}
			})
		}
	</script>
	<!-- <script src="<c:url value="/statics/bootstrap-3.3.0/js/bootstrap.js"/>"></script>
<script src="<c:url value="/statics/jquery-ui-1.12.1/jquery-ui.js"/>"></script>
<script
	src="<c:url value="/statics/jquery-ui-1.12.1/datepicker-zh-CN.js"/>"></script> -->
	<script src="../statics/bootstrap-3.3.0/js/bootstrap.js"></script>
	<script src="../statics/jquery-ui-1.12.1/jquery-ui.js"></script>
	<script src="../statics/jquery-ui-1.12.1/datepicker-zh-CN.js"></script>
<script type="text/javascript">
	console.log(location.search.replace('?',''));
	$(function (){
		let orderId = window.location.search.replace('?','').split("=")[1];
		$.ajax({
			url : "/order/"+orderId,
			type : "GET",
			contentType : "application/json;charset=utf-8",
			data : "",
			success : function (data){
				console.log(data.data);
				showOrder(data.data);
				console.log(data.data.status);
				showButton(data.data.status);
				getOtherOrder(orderId,data.data.customerId);
				if(data.data.status==2){
					console.log("交易完成，查手机号");
					$.ajax({
						url : "/user/id/"+data.data.sellerId,
						type : "GET",
						contentType : "application/json;charset=utf-8",
						data : "",
						success : function (data){
							console.log("查手机号，进入success");
							console.log(data);
							$("#phone").html(data.data.phoneNumber);
						}
					});
				}
			}
		});
	});

	function showOrder(result){
		$("#order_id").html(result.id);
		$("#order_goodName").html(result.goodName);
		$("#order_seller").html(result.seller);
		$("#order_customer").html(result.customer);
		$("#money").html(result.money);
		$("#order_end").html(result.endDate);
		if (result.status == 1){
			$("#order_status").html("交易中");
		}else if (result.status == 2){
			$("#order_status").html("交易完成");
		} else {
			$("#order_status").html("订单已取消");
		}
		$("#order_sub").html(result.submitDate);
		if(result.endDate!=null&&result.endDate!=""){
			$("#order_end").html(result.endDate);
		}else{
			$("#order_end").html("");
		}
	}
	
	
	function showButton(result){
		if (result == 1){
			$("#order_btn").append(
					"<button class='btn btn-success' onclick='deleteOrder()'>删除</button>"+
					"<button id='success' class='btn btn-primary pull-right' onclick='completeOrder()'>完成交易</button>"
			)
		} else if (result == 2) {
			$("#order_btn").append(
					"<button id='noSuccess' class='btn btn-primary pull-right'" +
					"disabled='true'>" + "交易已完成" + "</button>"
			)
		} else {
			$("#order_btn").append(
					"<button id='cancel' class='btn btn-primary pull-right'" +
					"disabled='true'>" + "交易取消" + "</button>"
			)
		}
	}

	function getOtherOrder(orderId, customerId){
		$.ajax({
			url : "/order/customer/others",
			type: "GET",
			data: {
				"orderId" : orderId,
				"customerId" : customerId
			},
			contentType: "application/json;charset=utf-8",
			success:function (result){
				console.log(result.data);
				showOtherOrders(result.data);
			}
		});
	}
	
	
	function showOtherOrders(result){
		if (result == null || result == ''){
			$("#orderBox").append(
					"<div class='col-md-12' align='center' style='background-color: #ffffff; margin-top: 50px;'>" +
					"<img src='../statics/image/logo/yihan.png' width='95%'; height='170px';>" +
					"<p style='color: #c4c4c4'; font-size: 16px>抱歉，暂未其他订单！</p>" +
					"</div>"
			)
		} else {
			$.each(result,function (index, obj){
				$("#orderBox").append(
						"<a href='/user/orderInfo.html?orderId=" +obj['id'] + "'>"+
						"<div class='col-md-12 rev' style='padding: 10px; margin-bottom: 5px;' >" +
						"<p>"+obj['submitDate']+"</p>" +
						"<p>"+obj['goodName']+"</p>" +
						"</a>"
				)
			})
		}
	}

	function deleteOrder(){
		let str = window.location.search.replace('?','');
		let orderId = str.split("&")[0].split("=")[1];
		$.ajax({
			url : "/order/"+orderId,
			type : "GET",
			contentType : "application/json;charset=utf-8",
			data : "",
			success : function (result){
				$.getJSON("/order/cancel/"+result.data.goodId +"&"+orderId,function (data){
					if (data.data == 1){
						alert("取消交易成功！");
						console.log(data);
						window.location.href = '/user/orderInfo.html?orderId='+orderId;
					} else {
						alert("因未知原因，取消交易失败！");
					}
				})
			}
		});
	}
	
	function completeOrder(){
		var out_trade_no = $("#order_id").html();
		var subject = $("#order_goodName").html();
		var money = $("#money").html();
		var  orderData={
			"outTradeNo":out_trade_no,
			"title":subject,
			"totalAmount":money
		}
		$.ajax({
			url : "/alipay/pay",
			type : "POST",
			contentType : "application/json;charset=utf-8",
			data : JSON.stringify(orderData),
			success : function (result){
				let divForm = document.getElementsByTagName('divform')
				if (divForm.length) {
					document.body.removeChild(divForm[0])
				}
				const div=document.createElement('divform');
				div.innerHTML=result;//这个result就是后台返回的一串from表单
				document.body.appendChild(div);
				document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
				document.forms[0].submit();
			}
		});
		
	}
</script>
</body>

</html>
